<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/11/1
  Time: 15:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户信息</legend>
</fieldset>
<div>
    <table id="demo" lay-filter="test"></table>
</div>
<script src="layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            const $=layui.$;

            if(layEvent === 'detail'){ //查看
                layer.open({
                    type: 2,
                    content: 'hello.jsp',
                    area: ['470px', '400px'],
                    success: function(layero, index){
                        console.log(layero, index);
                        //数据绑定
                        const body=layer.getChildFrame('body',index);
                        body.find('#username').val(data.username);
                        body.find('#pwd').val(data.password);
                        body.find('#sex').val(data.sex);
                        body.find('#question').val(data.question);
                        body.find('#answer').val(data.answer);
                        body.find('#desc').val(data.introduce);
                    }
                });
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/Test1_war/user/del/',
                        type: 'POST',
                        data:{username:data.username},
                        success:function (res){
                            if(res.code===200) {
                                tableIns.reload();
                                layer.msg('删除成功');
                            }
                            else
                                layer.msg('删除失败');
                        }
                        ,error(error){
                            layer.msg(error);
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    content: 'edit_plus.jsp',
                    area: ['700px', '400px'],
                    title: false,
                    btn: ['确定', "取消"],
                    yes: function (index, layero) {
                        const iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'user-add-save'
                            , submit = layero.find('iframe').contents().find('#' + submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            const field = data.field; //获取提交的字段

                            $.ajax({
                                url:'/Test1_war/user/update/plus',
                                type: 'POST',
                                data: JSON.stringify(field),
                                success: function (res){
                                    if (res.code === 200) {
                                        tableIns.reload();
                                        layer.close(index);
                                        layer.msg('修改成功');
                                    } else {
                                        layer.msg('修改失败');
                                    }
                                },
                                error: function (error){
                                    layer.msg('修改失败');
                                }
                            });
                        });

                        submit.trigger('click');
                    },
                    success: function(layero, index){
                        console.log(layero, index);
                        //数据绑定
                        const body=layer.getChildFrame('body',index);
                        body.find('#username').val(data.username);
                        body.find('#pwd').val(data.password);
                        body.find('#sex').val(data.sex);
                        body.find('#question').val(data.question);
                        body.find('#answer').val(data.answer);
                        body.find('#desc').val(data.introduce);
                    }
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        //第一个实例
        var tableIns = table.render({
            elem: '#demo'
            ,url: '/Test1_war/user/all/' //数据接口
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            ,cols: [[ //表头
                {field: 'username', title: '用户名', sort: true, fixed: 'left'}
                ,{field: 'password', title: '密码'}
                ,{field: 'sex', title: '性别', sort: true}
                ,{field: 'question', title: '密保问题'}
                ,{field: 'answer', title: '答案'}
                ,{field: 'introduce', title: '签名'}
                ,{fixed: 'right', title: '操作',width:175, align:'center', toolbar: '#barDemo'}
            ]]
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
